<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手风琴</title>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body {
        background: #ccc;
    }

    a {
        text-decoration: none;
    }

    img {
        border: none;
    }

    /* 第二步：开始写CSS */
    /* 首先，写好最大DIV的样式，使用隐藏溢出 */
    .accordion {
        width: 805px;
        height: 320px;
        overflow: hidden;
        margin: 180px auto;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.4);
    }

    
    .accordion ul {
        width: 3000px;
    }

    /* 写好li样式，使用过渡动画 */
    .accordion li {
        display: block;
        width: 160px;
        height: 320px;
        overflow: hidden;
        position: relative;
        float: left;
        border-left: 1px solid #aaa;
        box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.4);
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }

    .accordion li img {
        display: block;
    }

    /* 鼠标移入ul的时候所有li宽度缩小到40像素 */
    .accordion ul:hover li {
        width: 40px;
    }

    /* 移入的当前li宽度变大到640像素 */
    .accordion ul li:hover {
        width: 640px;
    }

    /* 标题样式 */
    .accordion .title {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 640px;
        background: rgba(0, 0, 0, 0.5);
    }

    .accordion .title a {
        display: block;
        color: #fff;
        font-size: 16px;
        padding: 20px;
    }
</style>
</head>
<body>
<!-- 第一步：先写好HTML布局，一个底部标题，一个展示图片 -->
<div class='accordion'>
    <ul>
        <li>
            <div class='title'>
                <a href="#">海贼王.凯多</a>
            </div>
            <a href="#">
                <img height="450" src='images/hzw1.jpeg'>
            </a>
        </li>
        <li>
            <div class='title'>
                <a href="#">海贼王.艾尼路</a>
            </div>
            <a href="#">
                <img height="450" src='images/hzw2.jpg'>
            </a>
        </li>
        <li>
            <div class='title'>
                <a href="#">海贼王.草帽海贼团</a>
            </div>
            <a href="#">
                <img height="450" src='images/hzw3.jpg'>
            </a>
        </li>
        <li>
            <div class='title'>
                <a href="#">海贼王.草帽海贼团</a>
            </div>
            <a href="#">
                <img height="450" src='images/hzw4.jpg'>
            </a>
        </li>
        <li>
            <div class='title'>
                <a href="#">海贼王.七武海</a>
            </div>
            <a href="#">
                <img height="450" src='images/hzw5.jpg'>
            </a>
        </li>
    </ul>
</div>
</body>
</html>